<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import Button from '@sscd/button';
  import Checkbox from '@sscd/checkbox';
  const checked = ref(false);
  const disabled = ref(false);
  const toggleChecked = () => {
    checked.value = !checked.value;
  };
  const toggleDisable = () => {
    disabled.value = !disabled.value;
  };
  const label = computed(() => {
    return `${checked.value ? 'Checked' : 'Unchecked'}-${disabled.value ? 'Disabled' : 'Enabled'}`;
  });
</script>

<template>
  <div class="demo">
    <div class="demo-title">受控的 checkbox</div>
    <div class="demo-content">
      <Checkbox v-model:checked="checked" :disabled="disabled">
        {{ label }}
      </Checkbox>
      <div class="mt12">
        <Button type="primary" size="small" @click="toggleChecked">
          {{ !checked ? 'Check' : 'Uncheck' }}
        </Button>
        <Button :style="{ marginLeft: '10px' }" type="primary" size="small" @click="toggleDisable">
          {{ !disabled ? 'Disable' : 'Enable' }}
        </Button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .mt12 {
    margin-top: 12px;
  }
</style>
